<template>
	<div class="tool-bar-ri">
		<div class="header-icon">
			<AssemblySize id="assemblySize" />
			<Language id="language" />
			<SearchMenu id="searchMenu" />
			<ThemeSetting id="themeSetting" />
			<!-- <Message id="message" /> -->
			<Fullscreen id="fullscreen" />
		</div>
		<span class="username">{{ globalStore.userInfo.username }}</span>
		<Avatar />
		<NoReadList @get-show="getShow" :showDialog="showDialog" :detial="detial"></NoReadList>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import SearchMenu from "./components/SearchMenu.vue";
import Fullscreen from "./components/Fullscreen.vue";
import Message from "./components/Message.vue";
import Language from "./components/Language.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
import AssemblySize from "./components/AssemblySize.vue";
import Avatar from "./components/Avatar.vue";
import NoReadList from "@/components/NoReadList/index.vue";

import { GlobalStore } from "@/stores";
import { AuthStore } from "@/stores/modules/auth";
import { useRouter } from "vue-router";
const authStore = AuthStore();
const globalStore = GlobalStore();
const showDialog = ref(false);
const detial: any = ref({});
onMounted(() => {
	watchShow();
});
const router = useRouter();

const getShow = () => {
	showDialog.value = false;
	setTimeout(() => {
		watchShow();
	}, 500);
};
const watchShow = () => {
	if (authStore.noReadList.length) {
		detial.value = authStore.noReadList[0];
		showDialog.value = true;
	} else {
		showDialog.value = false;
	}
};
// 监听当前路由
watch(
	() => router.currentRoute.value,
	() => {
		getShow();
	},
	{ immediate: true }
);
</script>

<style scoped lang="scss">
.tool-bar-ri {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 30px 0 0;
	.header-icon {
		display: flex;
		align-items: center;
		& > * {
			margin-left: 21px;
		}
	}
	.username {
		margin: 0 20px;
		font-size: 15px;
	}
}
</style>
